<template>
    <div>
        <TimeSelector v-model:period-string="periodString" :options="options"/>
        <div class="box-chart">
            <div>
                <BudgetBarChart :budget-type="budgetType" :bar-chart-data="barChartData"/>
                <BudgetPieChart :budget-type="budgetType" :pie-chart-data="pieChartData"/>
            </div>
            <div class="budget-item">
                <h1>支出记录</h1>
                <BudgetTable :budget-type="budgetType" :budget-data="expenseData" @page-change="getTableData" :total="total"/>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref,watch } from 'vue'
import TimeSelector from '@/components/timeSelector/index.vue'
import BudgetBarChart from '@/components/budgetBarChart/index.vue'
import BudgetPieChart from '@/components/budgetPieChart/index.vue'
import BudgetTable from '@/components/budgetTable/index.vue'
import { Period, PieChartItem } from '@/types/config'
import { ExpenseItemForDisplay } from '@/types/expense'
import { BarChartData } from '@/types/config'
import getPeriod from '@/utils/getPeriod'
import {getClassifiedExpense, getDetailedExpense, getOnePageExpense} from '@/api/expense'
const budgetType = 1
let periodString = ref<string>('本月')
const options = ['本月', '上月', '今年', '去年']
let total = ref(1)
let expenseData = ref<ExpenseItemForDisplay[]>([])
let barChartData = ref<BarChartData>({
    date: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    amount: [21313, 12352, 12314, 44562, 42431, 22352, 23341, 45234, 24235, 12255]
})
let pieChartData = ref<PieChartItem[]>(
    [
        { value: 12315, name: '工资' },
        { value: 2314, name: '彩票' },
        { value: 1242, name: '收礼' },
        { value: 3241, name: '津贴' },
        { value: 1235, name: '其他' }
    ]
)

watch(periodString,()=>{
    const period = getPeriod(periodString.value)
    getBarChartdata(period)
    getPieChartData(period)
})
const getBarChartdata = async(period:Period)=>{
    await getDetailedExpense(period).then(result=>{
        barChartData.value.amount = result.data
        barChartData.value.date=[]
        for(let i = 1;i<result.data.length;i++){
            barChartData.value.date.push(i)
        }
    }).catch(error=>{
        console.dir(error)
    })
}
const getPieChartData = async(period:Period)=>{
    await getClassifiedExpense(period).then(result=>{
        pieChartData.value = result.data
  }).catch(error=>{
    console.dir(error)
  })
}

const getTableData = async (page: number, pageSize: number, begin: string, end: string) => {
    await getOnePageExpense({page,pageSize,begin,end}).then(result=>{
    expenseData.value = result.data.records
    total.value = result.data.total
    
    // result.records.forEach((element:ExpenseItemForDisplay) => {
    //     const { amount, time, description, id, typeName2,memberName,beneficiary } = element
    //     expenseData.value.push({
    //         id, time, typeName2, amount, memberName, description,beneficiary
    //     })
    // });
    })
    
}
onMounted(()=>{
    const period = getPeriod(periodString.value)
    getBarChartdata(period)
    getPieChartData(period)
    getTableData(1,10,period.begin,period.end)
})
</script>

<style scoped lang="scss">
.box-chart {
    display: flex;
    flex-direction: row;
}

.budget-item {
        width: 600px;
        height: 540px;
        padding-top: 20px;

        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            padding-left: 10px;
            color: rgb(101, 101, 101);
        }

    }
</style>